<template>
<div class="index_welcome">
  <h1>欢迎</h1>
</div>

  <div class="index_card">

    <el-row :gutter="40">

      <el-col
        :span="6"
        v-for="(result, index) in paper"
        :key="index"
        :offset="1"
        class="index_col"
      >

          <el-card shadow="hover" class="card_total" @click="paperDetails(result.id)">
          
          <template #header>
            <div class="card_header">
              <span>{{result.title}}</span>
              <!-- <el-button class="button" type="text">操作按钮</el-button> -->
            </div>
          </template>
          <div>

              <p>
                <b>{{ result.name }}</b>
              </p>

              <p>
                总分:{{ "【"+result.totalScore+"】" }}
              </p>

              <p>
                考试时间：
                <i class="el-icon-timer"></i>
                <span>
                  {{ result.examTime }}分钟
                </span>
              </p>

            <p>
              <el-rate
                disabled
                :colors="colors"
                v-model="result.difficulty"
                show-text
                :texts="texts"
                text-color="#000000"
                score-template="{value}">
              </el-rate>

            </p>

            <p>
              及格分数:<span>{{ "【"+result.passScore+"】" }}</span>
            </p>

            <!-- <p>
              {{result.info}}
            </p> -->

          </div>
        </el-card>
      
      </el-col>
    </el-row>
  </div>
</template>

<script>
import router from '../../router';
import { paperList } from '../../api/frontdesk'
export default {
  data() {
    return {
      colors: ['#32CD32', '#EE9A00', '#FF0000'],
      texts: ['简单','简单','中等','中等','复杂'],
      paper:[
            {
                title: '',//标题
                name:'',//名字
                examTime:'',//时间
                totalScore:'',//总分
                passScore:'',//及格分数
                info:'',//描述
                difficulty:'',//难度
            },
        ],
    }
  },
  methods:{
   paperDetails(id){
     //这里是一个优化点，现在不太会，等以后再看看吧
     
      //存入localStorage
      localStorage.setItem("paperId",id);
      // console.log(id)
      router.push('/paperdetails')
    },
    async getAllPaper(){
      const result = await paperList()
      console.log(result)
      this.paper = result.data;
    }
  },
  created() {
    this.getAllPaper();
  },
};
</script>

<style lang="less" scoped>

.index_welcome{
  text-align: center;
  width: 100%;
}

.index_col{
  margin-bottom: 80px;
  // margin-right: 10px;
}

.index_card{
  margin-top: 100px;
  width: 100%;
}

.card_total{
  cursor: pointer;
  .card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
}


.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

</style>